const calendar = {
    props:{
      data:{
          type:Array,
          default(){
              return []
          }
      }
    },
    data() {
        return {
            currentYear: null,
            currentMonth: null,
            days: [],
            weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        };
    },
    computed: {
        isCurrentMonth() {
            // 判断当前年月是否为本月
            const currentDate = new Date();
            return this.currentYear === currentDate.getFullYear() && this.currentMonth === currentDate.getMonth() + 1;
        }
    },
    methods: {
        updateCalendar() {
            // 获取当前月份日期
            const date = new Date(this.currentYear, this.currentMonth - 1);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;

            // 获取当前月份天数
            const daysInMonth = new Date(year, month, 0).getDate();

            // 获取当前月份第一天是星期几
            const firstDayOfWeek = new Date(year, month - 1, 1).getDay();

            // 获取上一个月的天数
            const previousMonthDays = firstDayOfWeek > 0 ? new Date(year, month - 1, 0).getDate() : 0;

            // 填充日期数组
            this.days = [];
            for (let i = firstDayOfWeek - 1; i >= 0; i--) {
                this.days.push({ day: previousMonthDays - i, isCurrentMonth: false });
            }
            for (let i = 1; i <= daysInMonth; i++) {
                this.days.push({ day: i, isCurrentMonth: true });
            }

            // 判断最后一天是否为周六
            const lastDayOfWeek = new Date(year, month - 1, daysInMonth).getDay();
            if (lastDayOfWeek !== 6) {
                const nextMonthDays = 6 - lastDayOfWeek;
                for (let i = 1; i <= nextMonthDays; i++) {
                    this.days.push({ day: i, isCurrentMonth: false });
                }
            }
        },
        previousMonth() {
            if (this.currentMonth === 1) {
                this.currentYear--;
                this.currentMonth = 12;
            } else {
                this.currentMonth--;
            }
            this.updateCalendar();
            this.$emit('change-month',`${this.currentYear}-${this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth}`)
        },
        nextMonth() {
            if(!this.isCurrentMonth){
                if (this.currentMonth === 12) {
                    this.currentYear++;
                    this.currentMonth = 1;
                } else {
                    this.currentMonth++;
                }
                this.updateCalendar();
                this.$emit('change-month',`${this.currentYear}-${this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth}`)
            }
        },
        isToday(day) {
            const currentDate = new Date();
            return day.isCurrentMonth && day.day === currentDate.getDate() && this.currentYear === currentDate.getFullYear() && this.currentMonth === (currentDate.getMonth() + 1);
        },
        isHasClock(day){
            return this.data.includes(`${dayjs(`${this.currentYear}-${this.currentMonth}-${day}`).format('YYYY-MM-DD')}`)
        },
        show(){
            // 获取当前日期
            const date = new Date();
            this.currentYear = date.getFullYear();
            this.currentMonth = date.getMonth() + 1;

            this.updateCalendar();
        }
    },
    mounted() {
        this.show()
    },
    template:`
         <div class="flex col-space-between">
            <span @click="previousMonth">上个月</span>
            <span>{{ currentYear }}年{{ currentMonth }}月</span>
            <span :class="[{'previous-month-day':isCurrentMonth}]" @click="nextMonth">下个月</span>
         </div>
         <div class="calendar">
            <div class="weekday" v-for="(weekday, index) in weekdays" :key="index">{{ weekday }}</div>
            <div v-for="(day, index) in days" :key="index" :class="['day', { 'previous-month-day': !day.isCurrentMonth, 'today': isToday(day), 'has-punch-card': isHasClock(day.day) }]">
                <span>{{ day.day }}</span>
                <span v-if="day.isCurrentMonth" class="punch-card-dot"></span>
            </div>
         </div>
    `
}